<template>
  <div v-if="item.goods_id" class="goods-item" @click="router.push(`/prodetail/${item.goods_id}`)">
    <div class="left">
        <img :src="item.goods_image" alt="">
    </div>
    <div class="right">
        <p class="title">{{ item.goods_name }}</p>
        <p class="count">{{ item.goods_sales }}</p>
        <p class="price">
            <span class="new">￥{{ item.goods_price_min }}</span>
            <span class="old">￥{{ item.goods_price_max }}</span>
        </p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
    item: {
        type: Object,
        required: true
    }
})

</script>

<style scoped lang="scss">
.goods-item {
    display: flex;
    margin: 10px;
    padding: 10px;
    border-bottom: 1px solid #f1f1f2;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
    .left {
        width: 100px;
        height: 100px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }   
    }
    .right {
        flex: 1;
        padding-left: 20px;
        .title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;    
            display: -webkit-box;  /* 为了兼容性保留 */
            -webkit-box-orient: vertical; /* 为了兼容性保留 */
            -webkit-line-clamp: 2; /* 限制显示的行数为2行 */
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .count {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
        }
        .price {
            .new {
                color: #c21401;
            }
            .old {
                color: #999;
            }
        }
    }

}
</style>
